<template>
	<div id="share">
		<header>
			<div class="header_1">
	  			<div class="header_1_l">
	  				<a href="tencent://message/?uin=800856669&Site=&Menu=yes" target="_self" class="qq">
	  					<img src="../../static/img/header-01.png"/>
	  					<p>在线客服</p>
	  				</a>
	  				<span></span>
	  				<div @click="collection('赶紧试','http://192.168.0.126:3000/home/index')" class="collection">
	  					<img src="../../static/img/header-02.png"/>
	  					<p>收藏</p>
	  				</div>
	  			</div>
	  			<div class="header_1_r">
	  				<ul v-if="!token">
	  					<li><router-link to="/IDoperation/login">商家登录</router-link></li>
	  					<li class="feature"><router-link to="/IDoperation/register">免费注册</router-link></li>
	  				</ul>
	  				<p id="logout" v-else><router-link to="/agent/agentCenter">{{user}}</router-link> <span @click="logout" class="logout">退出</span></p>
	  				<span class="color_fg"></span>
	  				<router-link v-wechat-title='$route.meta.title' to="/home/index">赶紧试首页</router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/share">分享赚钱<span>月入4000</span></router-link>
	  				<span class="color_fg"></span>
	  				<router-link to="/help">帮助中心</router-link>
	  			</div>
	  		</div>
		</header>
		<div id="banner">
			<div class="fans_num">
				<p>21565</p>
			</div>
		</div>
		<!--------邀请奖励------------>
		<div class="share_1">
			<div class="share_title">
				<p><img src="../../static/img/share-05.png"/>邀请奖励<img src="../../static/img/share-05.png"/></p>
			</div>
			<div class="share_1_box">
				<div class="red_packet">
					<img src="../../static/img/share-02.png"/>
					<p>每邀请1位粉丝注册下单</p>
				</div>
				<img src="../../static/img/share-03.png"/>
				<div class="gold">
					<img src="../../static/img/share-04.png"/>
					<p>粉丝领取三个试用品后再得100金币</p>
				</div>
			</div>
		</div>
		<!----------如何邀请--------------->
		<div class="share_2">
			<div class="share_2_1">
				<img src="../../static/img/code.jpg"/>
				<img src="../../static/img/share-06.png"/>
			</div>
			<div class="share_2_2">
				<h3>如何邀请好友</h3>
				<ul>
					<li>
						<span>①</span>
						<p>扫描左侧二维码关注赶紧试公众号，并进入赶紧试</p>
					</li>
					<li>
						<span>②</span>
						<p>进入赶紧试后点击下方任务栏“分享赚钱”功能按键，加入分享页面</p>
					</li>
					<li>
						<span>③</span>
						<p>加入分享页面后将“我的二维码”或“我的专属邀请码”分享给好友</p>
					</li>
					<li>
						<span>④</span>
						<p>好友注册成功并领取任务即邀请成功</p>
					</li>
				</ul>
			</div>
		</div>
		<!---------粉丝奖励------------->
		<div class="fans">
			<div class="share_title">
				<p><img src="../../static/img/share-05.png"/>粉丝奖励<img src="../../static/img/share-05.png"/></p>
			</div>
			<ul>
				<li>
					<span>①</span>
					<p>邀请粉丝完成注册，可得<span>10元</span></p>
				</li>
				<li>
					<span>②</span>
					<p>粉丝领取三个试用品后，再得<span>100金币</span></p>
				</li>
			</ul>
			<div class="fans_item">
				<h3>提示：</h3>
				<p>你邀请的粉丝首次注册赶紧试，可享受新人专享99%中奖！</p>
			</div>
			<div class="fans_item">
				<h3>举个例子：</h3>
				<p>你通过分享二维码邀请了一个粉丝注册，该粉丝完成首单后，你可获得<span>10元现金</span>，粉丝领取三次试用还能赠送<span>100金币</span></p>
			</div>
		</div>
		<!---------其他规则------------->
		<div class="rules">
			<div class="share_title">
				<p><img src="../../static/img/share-05.png"/>其他规则<img src="../../static/img/share-05.png"/></p>
			</div>
			<ul>
				<li>
					<span>①</span>
					<p>奖励有效期为粉丝注册后的2个月内，现金在粉丝成功获得返款后到账</p>
				</li>
				<li>
					<span>②</span>
					<p>粉丝注册后<span>30天内</span>不下单，将<span>永久</span>解除与你的代言人关系，无法恢复；</p>
				</li>
				<li>
					<span>③</span>
					<p>粉丝必须为赶紧试新用户，若通过反作弊系统检测出有作弊行为，将取消奖励、冻结余额并永久封号；</p>
				</li>
				<li>
					<span>④</span>
					<p>你可通过微信、朋友圈等方式分享商品给粉丝领取；</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	name: 'share',
	data:function(){
		return{
			token: '',
			user: '',//商家昵称
			top: '',
		}
	},
	methods:{
	  	collection: function(title,url){
	  		try{
			   window.external.addFavorite(url,title);
			}
			catch(e){
				try{
				    window.sidebar.addPanel(title,url,"");
				}
				catch(e){
					this.$alert("3","抱歉，您所使用的浏览器无法完成此操作。请使用快捷键Ctrl+D进行添加！");
				}
			}
	  	},
		info: function(){
			var _this = this;
			_this.$axios.post('/agent/info/show').then(function(res){
			    var data = res.data.result;
		    	_this.user = data.nickName;
			}).catch(function (error) {
			    console.log(error);
			});
		},
		logout: function(){
			localStorage.removeItem('token');
			this.$router.push('/IDoperation/login');
		},
	},
	created:function(){
		$(window).scrollTop(0);
		var token = localStorage.getItem('token');
		if(token){
			this.token = token;
			this.info();
		}
	},
}
</script>

<style scoped>
#share{
	background-color: #fff;
	padding-bottom: 50px;
    margin-bottom: -30px;
}
/* ========== */
/* = Header = */
/* ========== */
header{
	width: 100%;
	background-color: #F5F5F5;
	min-width: 1366px;
}
header .router-link-active{
	color: #ff464e;
}
.header_1{
	width: 1230px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #808080;
	font-size: 12px;
	padding: 8px 0;
}
.header_1_l{
	display: flex;
	align-items: center;
}
.header_1_l span{
	height: 10px;
	width: 1px;
	background-color: #9f9f9f;
	margin: 0 15px;
}
.qq,.collection{
	display: flex;
	align-items: center;
	cursor: pointer;
}
.qq img,.collection img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.header_1_r{
	display: flex;
	align-items: center;
}
.header_1_r .color_fg{
	height: 10px;
	width: 1px;
	background-color: #9F9F9F;
	margin: 0 10px;
}
.header_1_r ul{
	display: flex;
	align-items: center;
}
.header_1_r ul li{
	margin-left: 10px;
}

.header_1_r #logout{
	display: flex;
}
.header_1_r .logout{
	color: #FF464E;
	cursor: pointer;
	margin-left: 5px;
}
.header_1_r a{
	display: flex;
	align-items: center;
}
.header_1_r a span{
	color: #FF464E;
}
.header_1_r a img{
	height: 8px;
	display: block;
	margin-left: 3px;
}
.feature{
	color: #ff464e;
}
#banner{
	height: 450px;
	background: url('../../static/img/share-01.jpg') no-repeat center;
	background-size: auto 100%;
}
.fans_num{
	width: 1230px;
	height: 450px;
	margin: 0 auto;
	position: relative;
}
.fans_num p{
	width: 150px;
	text-align: center;
	font-size: 32px;
	color: #FFFFFF;
	font-weight: 600;
	position: absolute;
	bottom: 38%;
	left: 458px;
}
.share_title{
	width: 100%;
	border-top: 1px solid #fee3ce;
	padding-bottom: 20px;
	margin-top: 20px;
	position: relative;
}
.share_title p{
	width: 300px;
	height: 40px;
	margin: 0 auto;
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 20px;
	color: #ab6b2d;
	font-weight: 600;
	background-color: #fff;
}
.share_title p img{
	height: 10px;
	width: 10px;
	display: block;
}
/*--------邀请奖励#fff2e9--------*/
.share_1{
	background-color: #fff;
	border-radius: 10px;
	width: 1000px;
	box-shadow: 0 0 10px #fff2e9;
	margin: 0 auto;
	padding: 30px 30px 50px 30px;
	margin-top: -80px;
	box-sizing: border-box;
}
.share_1_box{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #fff2e9;
	padding: 20px 95px;
	box-sizing: border-box;
	margin-top: 20px;
}
.share_1_box>img{
	height: 55px;
	display: block;
}
.share_1_box .red_packet img{
	width: 240px;
	display: block;
}
.share_1_box .red_packet p{
	color: #d7a75b;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}
.share_1_box .gold{
	padding-top: 78px;
	margin-left: -11px;
}
.share_1_box .gold img{
	width: 130px;
	display: block;
	margin: 0 auto;
	margin-bottom: 25px;
}
.share_1_box .gold p{
	color: #d7a75b;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}
/*---------如何邀请-----------*/
.share_2{
	width: 1000px;
	height: 346px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 50px;
}
.share_2_1{
	width: 400px;
	background-color: #fff;
	height: 100%;
	box-shadow: 0 0 10px #fff2e9;
	border-radius: 10px;
	padding: 50px 100px;
	box-sizing: border-box;
}
.share_2_1 img:first-child{
	width: 100%;
	display: block;
}
.share_2_1 img:last-child{
	width: 87%;
	display: block;
	margin: 0 auto;
}
.share_2_2{
	width: 550px;
	background-color: #fff;
	height: 100%;
	box-shadow: 0 0 10px #fff2e9;
	border-radius: 10px;
	box-sizing: border-box;
}
.share_2_2 h3{
	width: 100%;
	text-align: center;
	font-size: 18px;
	color: #4D4D4D;
	height: 60px;
	line-height: 60px;
	border-bottom: 1px solid #E6E6E6;
}
.share_2_2 ul{
	padding: 30px 50px;
	box-sizing: border-box;
}
.share_2_2 ul li{
	display: flex;
	margin-bottom: 20px;
	font-size: 16px;
	color: #4D4D4D;
}
.share_2_2 ul li span{
	color: #D7A75B;
	margin-right: 8px;
	font-size: 18px;
}
.share_2_2 ul li p{
	line-height: 25px;
}
/*---------粉丝奖励-----------*/
.fans{
	background-color: #fff;
	border-radius: 10px;
	width: 1000px;
	box-shadow: 0 0 10px #fff2e9;
	margin: 0 auto;
	padding: 30px;
	margin-top: 50px;
	box-sizing: border-box;
	font-size: 16px;
}
.fans ul li{
	display: flex;
	align-items: center;
	margin-top: 15px;
	color: #4D4D4D;
}
.fans ul li>span{
	color: #D7A75B;
	margin-right: 8px;
	font-size: 18px;
}
.fans ul li p span{
	color: #FF464E;
}
.fans_item{
	margin-top: 15px;
}
.fans_item h3{
	font-size: 16px;
	color: #D7A75B;
	margin-bottom: 10px;
}
.fans_item span{
	color: #FF464E;
}
/*---------其他规则-----------*/
.rules{
	background-color: #fff;
	border-radius: 10px;
	width: 1000px;
	box-shadow: 0 0 10px #fff2e9;
	margin: 0 auto;
	padding: 30px;
	margin-top: 50px;
	box-sizing: border-box;
	font-size: 16px;
}
.rules ul li{
	display: flex;
	align-items: center;
	margin-top: 15px;
	color: #4D4D4D;
}
.rules ul li>span{
	color: #D7A75B;
	margin-right: 8px;
	font-size: 18px;
}
.rules ul li p span{
	color: #FF464E;
}
</style>